<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>选中表格中的单元格</title>
</head>
<style type="text/css">
.STYLE3 {font-size: 13px; color: #FF0000; }
.STYLE4 {font-size: 12px}
</style>
<body>
<table width="547" height="200" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="34"><img src="images/bg.jpg" width="547" height="34"></td>
  </tr>
  <tr>
    <td align="center" valign="top" background="images/bg2.jpg">
<table id="table1" width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#CCCCCC">
      <tr>
        <td width="113" height="24" align="center" bgcolor="#FFFFFF"><span class="STYLE3">商品名称</span></td>
        <td width="83" align="center" bgcolor="#FFFFFF"><span class="STYLE3">数量</span></td>
        <td width="139" align="center" bgcolor="#FFFFFF"><span class="STYLE3">价格</span></td>
        <td width="142" align="center" bgcolor="#FFFFFF"><span class="STYLE3">合计</span></td>
      </tr>
      <tr>
        <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">手机</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">1</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">888</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">888</td>
      </tr>
      <tr>
        <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">手表</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">1</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">999</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">999</td>
      </tr>
      <tr>
        <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">数码相机</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">2</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">2400</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">4800</td>
      </tr>
      <tr>
        <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">手机</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">4</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">2400</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">9600</td>
      </tr>
      <tr>
        <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">移动硬盘</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">4</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">400</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">1600</td>
      </tr>
      <tr>
        <td height="20" align="center" bgcolor="#FFFFFF"><span class="STYLE4">笔记本电脑</span></td>
        <td align="center" bgcolor="#FFFFFF"><span class="STYLE4">2</span></td>
        <td align="center" bgcolor="#FFFFFF"><span class="STYLE4">4150</span></td>
        <td align="center" bgcolor="#FFFFFF"><span class="STYLE4">9200</span></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="27"><img src="images/bg1.jpg" width="547" height="27"></td>
  </tr>
</table>
<script type="text/javascript">
var lastSelection = null;
function select(event){
	var e, r, c;
    e = event.target;		//获取触发时间的元素
	if(e.tagName == "TD"){
		c = findcell(e);
		if(c != null){
			if(lastSelection != null){
				deselectroworcell(window.lastSelection);
			}
			selectroworcell(c); 
			lastSelection = c;
		} 
	}
	event.cancelBubble = true;	//取消冒泡语句,用于防止向下一个外层对象冒泡
} 
table1.onclick=select;
function findcell(e){
	if(e.tagName == "TD"){
		return e;
	}else if(e.tagName == "BODY"){
		return null;
	}else{
		return findcell(e.parentElement);
	}  
}
function selectroworcell(r){
	r.style.backgroundColor="darkblue";
	r.style.color="white";
}
function deselectroworcell(r){ 
	r.style.backgroundColor = "";
	r.style.color = "";
}
</script>
</body>
</html>
